<template>
  <div>
    <Form :model="formItem">
      <Row :gutter="24">
        <Col span="8">
          <FormItem>
            <template #label>
              <span style="color: red">*</span><span>工作单位：</span>
            </template>
            <Input maxlength="30" :disabled="formItem.operation === '2'" v-model="formItem.work_address"></Input>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem>
            <template #label>
              <span>房产证号（若有房产证则需填写此项）：</span>
            </template>
            <input maxlength="30" class="borrow-input" v-if="formItem.operation !== '2'" v-model="fc_no"></input>
            <Input disabled v-if="formItem.operation === '2'" v-model="formItem.fc_no"></Input>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem>
            <template #label>
              <span style="color: red">*</span><span>房屋建筑面积（㎡）：</span>
            </template>
            <InputNumber style="width: 100%" :min="0" :disabled="formItem.operation === '2'" @on-change="getSubsidiesm2" v-model="formItem.fc_m2"></InputNumber>
          </FormItem>
        </Col>
      </Row>
      <Row :gutter="24">
        <Col span="8">
          <FormItem>
            <template #label>
              <span>补贴面积上限（㎡）：</span>
            </template>
            <Input disabled v-model="formItem.subsidy_m2up"></Input>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem>
            <template #label>
              <span>采暖报销单价（元/㎡）：</span>
            </template>
            <InputNumber style="width: 100%" :min="0" :max="26" :disabled="formItem.operation === '2'" @on-change="getSubsidiesm2" v-model="formItem.subsidy_rmbone"></InputNumber>
<!--            <Input :disabled="formItem.operation === '2'" v-model="formItem.subsidy_rmbone"></Input>-->
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem>
            <template #label>
              <span>补贴标准（%）：</span>
            </template>
<!--            <InputNumber :min="0" :max="100" v-model="formItem.subsidy_mode" :formatter="value => `${value}%`" :parser="value => value.replace('%', '')"></InputNumber>-->
            <Input disabled type="number" max="100" min="0" v-model="formItem.subsidy_mode"></Input>
          </FormItem>
        </Col>
      </Row>
      <Row :gutter="24">
        <Col span="8">
          <FormItem>
            <template #label>
              <span>采暖费补贴金额（元）：</span>
            </template>
            <Input disabled v-model="formItem.subsidy_rmb"></Input>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem>
            <template #label>
              <span>个人承担金额（元）：</span>
            </template>
            <Input disabled v-model="formItem.persion_rmb"></Input>
          </FormItem>
        </Col>
      </Row>
      <Row :gutter="24">
        <Col span="24">
          <FormItem>
            <template #label>
              <span style="color: red">*</span><span>取暖救助报销地址：</span>
            </template>
            <div class="inputClass">
              <Select :disabled="formItem.operation === '2'" v-model="formItem.city" placeholder="选择区" style="width: 15%;padding-right: 5px" @on-change="getMailListInfo(formItem.city, 'streetList')">
                <Option v-for="item in arrayData.cityList" :value="JSON.stringify(item)" :key="item.id">{{ item.name }}</Option>
              </Select>
              <Select :disabled="formItem.operation === '2'" v-model="formItem.street" placeholder="选择街道"  style="width: 15%;padding-right: 5px" @on-change="getMailListInfo(formItem.street, 'communityList')">
                <Option v-for="item in arrayData.streetList" :value="JSON.stringify(item)" :key="item.id">{{ item.name }}</Option>
              </Select>
              <Select :disabled="formItem.operation === '2'" v-model="formItem.community" placeholder="选择社区" style="width: 15%;padding-right: 5px">
                <Option v-for="item in arrayData.communityList" :value="JSON.stringify(item)" :key="item.id">{{ item.name }}</Option>
              </Select>
              <Input maxlength="50" :disabled="formItem.operation === '2'" v-model="formItem.d_address" placeholder="详细地址" style="width: 55%"></Input>
            </div>
          </FormItem>
        </Col>
      </Row>
      <Row :gutter="24">
        <Col span="24">
          <FormItem label="备注">
            <Input maxlength="300" show-word-limit :disabled="formItem.operation === '2'" type="textarea" v-model="formItem.cn_rmb_all"></Input>
          </FormItem>
        </Col>
      </Row>
    </Form>
<!--    <Divider style="margin: 10px 0" />-->
  </div>
</template>
<script>
import { postCN } from '@/api/eventlist'

export default {
  props: {
    paramsData: Object
  },
  data () {
    return {
      cityName: '沈阳市',
      fc_no: '',
      newRoleNameEn: '',
      formItem: {
        fc_m2: 0,
        subsidy_m2up: 0,
        subsidy_rmb: 0,
        persion_rmb: 0
      },
      arrayData: {},
      cityList: []
    }
  },
  methods: {
    getMailListInfo (param, list) {
      let paramData = {}
      if (param) {
        paramData = JSON.parse(param)
      }
      let data = {
        method: 'findDownList',
        pid: paramData.id
      }
      postCN(data).then(res => {
        if (list === 'streetList') {
          this.formItem.street = ''
          this.formItem.community = ''
        }
        if (list === 'communityList') {
          this.formItem.community = ''
        }
        this.$set(this.arrayData, list, res.data.data.downList)
      })
    },
    getMailList (param, list) {
      // console.log('uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu')
      let paramData = JSON.parse(param)
      let data = {
        method: 'findDownList',
        pid: paramData.id
      }
      postCN(data).then(res => {
        if (res.data.errcode === 0) {
          this.$set(this.arrayData, list, res.data.data.downList)
          let that = this
          if (that.formItem.area) {
            that.arrayData.cityList.forEach(function (item) {
              if (item.name === that.formItem.area) {
                that.formItem.city = JSON.stringify(item)
                that.getMailList2(that.formItem.city, 'streetList')
              }
            })
          }
        }
      })
    },
    getMailList2 (param, list) {
      let paramData = JSON.parse(param)
      let data = {
        method: 'findDownList',
        pid: paramData.id
      }
      let that = this
      postCN(data).then(res => {
        if (res.data.errcode === 0) {
          that.$set(this.arrayData, list, res.data.data.downList)
          that.arrayData.streetList.forEach(function (item) {
            if (item.name === that.formItem.street) {
              that.formItem.street = JSON.stringify(item)
              that.getMailList3(that.formItem.street, 'communityList')
            }
          })
        }
      })
    },
    getMailList3 (param, list) {
      let paramData = JSON.parse(param)
      let data = {
        method: 'findDownList',
        pid: paramData.id
      }
      postCN(data).then(res => {
        if (res.data.errcode === 0) {
          this.$set(this.arrayData, list, res.data.data.downList)
          let that = this
          that.arrayData.communityList.forEach(function (item) {
            if (item.name === that.formItem.community) {
              that.formItem.community = JSON.stringify(item)
            }
          })
        }
      })
    },
    getSubsidiesm2 () {
      let JZBX = 0 // 报销单价
      let JZBBX = 0 // 不报销单价
      let JZBY = 0
      let JZFBY = 0
      let JZCN = 0 // 补贴面积上限
      this.formItem.settingList.forEach(function (item) {
        if (item.type_dictionary === 'JZBX') {
          JZBX = parseFloat(item.three_dictionary)
        }
        if (item.type_dictionary === 'JZBBX') {
          JZBBX = parseFloat(item.three_dictionary)
        }
        if (item.type_dictionary === 'JZBY') {
          JZBY = parseFloat(item.three_dictionary)
        }
        if (item.type_dictionary === 'JZFBY') {
          JZFBY = parseFloat(item.three_dictionary)
        }
        if (item.type_dictionary === 'JZCN') {
          JZCN = parseFloat(item.three_dictionary)
        }
      })
      if (!this.formItem.subsidy_rmbone) {
        this.formItem.subsidy_rmbone = JZBX
      }
      if (this.paramsData.subsidy_type === '610' || this.paramsData.subsidy_type === '620') {
        this.formItem.subsidy_mode = JZBY
      } else {
        this.formItem.subsidy_mode = JZFBY
      }
      let actual = parseFloat(this.formItem.fc_m2)
      let subsidy_mode = parseFloat(this.formItem.subsidy_mode)
      if (this.formItem.fc_m2) {
        if (actual <= JZCN) {
          // console.log('小于60')
          this.formItem.subsidy_m2up = actual
          this.formItem.subsidy_rmb = actual * this.formItem.subsidy_rmbone * subsidy_mode * 0.01
          this.formItem.persion_rmb = actual * JZBBX * (10000 - subsidy_mode * 100) * 0.0001
          this.formItem.persion_rmb = this.formItem.persion_rmb.toFixed(2)
          this.formItem.subsidy_rmb = this.formItem.subsidy_rmb.toFixed(2)
          // console.log(this.formItem.persion_rmb, 'this.formItem.persion_rmb')
        } else if (actual > JZCN) {
          // console.log('大于60')
          this.formItem.subsidy_m2up = JZCN
          this.formItem.fc_m2 = parseFloat(this.formItem.fc_m2)
          this.formItem.subsidy_rmb = this.formItem.subsidy_m2up * this.formItem.subsidy_rmbone * subsidy_mode * 0.01
          // console.log((this.formItem.fc_m2 * 100 - this.formItem.subsidy_m2up * 100) * 0.01 , 'this.formItem.fc_m2 - this.formItem.subsidy_m2up')
          let persion_m2 = (this.formItem.fc_m2 - this.formItem.subsidy_m2up).toFixed(5)
          this.formItem.persion_rmb = persion_m2 * JZBBX + this.formItem.subsidy_m2up * JZBBX * (10000 - subsidy_mode * 100) * 0.0001
          // this.formItem.persion_rmb = (this.formItem.fc_m2 * 10000 - this.formItem.subsidy_m2up * 10000) * 0.0001 * JZBBX + this.formItem.subsidy_m2up * JZBBX * (10000 - subsidy_mode * 100) * 0.0001
          this.formItem.persion_rmb = persion_m2 * JZBBX + this.formItem.subsidy_m2up * JZBBX * (10000 - subsidy_mode * 100) * 0.0001
          // this.formItem.persion_rmb = (this.formItem.fc_m2 * 100 - this.formItem.subsidy_m2up * 100) * 0.01 * JZBBX + this.formItem.subsidy_m2up * JZBBX * (10000 - subsidy_mode * 100) * 0.0001
          this.formItem.persion_rmb = this.formItem.persion_rmb.toFixed(2)
          this.formItem.subsidy_rmb = this.formItem.subsidy_rmb.toFixed(2)
        }
      } else {
        this.formItem.subsidy_m2up = '0'
        this.formItem.persion_rmb = '0'
        this.formItem.subsidy_rmb = '0'
      }
    },
    getUserInfo () {
      let data = {
        method: 'selectUserType',
        card_no: this.formItem.person_card_no,
        // card_no: '211382199611083135',
        // type: '1'
        type: this.formItem.type,
        check: '1'
      }
      postCN(data).then(res => {
        if (res.data.errcode === 0) {
          let formItem = {
            settingList: res.data.data.settingList
          }
          this.formItem.settingList = formItem.settingList
          let JZBX = 0
          let JZBY = 0
          let JZFBY = 0
          this.formItem.settingList.forEach(function (item) {
            if (item.type_dictionary === 'JZBX') {
              JZBX = parseFloat(item.three_dictionary)
            }
            if (item.type_dictionary === 'JZBY') {
              JZBY = parseFloat(item.three_dictionary)
            }
            if (item.type_dictionary === 'JZFBY') {
              JZFBY = parseFloat(item.three_dictionary)
            }
          })
          if (this.paramsData.subsidy_type === '610' || this.paramsData.subsidy_type === '620') {
            this.formItem.subsidy_mode = JZBY
          } else {
            this.formItem.subsidy_mode = JZFBY
          }
          // this.formItem.subsidy_rmbone = JZBX
          if (!this.formItem.subsidy_rmbone) {
            this.formItem.subsidy_rmbone = JZBX
          }
        }
      })
    },
    clearInfo () {
      this.formItem = {
        ...this.paramsData,
        fc_m2: null,
        subsidy_rmb: 0,
        subsidy_mode: 0,
        subsidy_rmbone: 0,
        persion_rmb: 0,
        subsidy_m2up: 0
      }
    }
  },
  mounted () {
    let data = {
      id: '2'
    }
    this.formItem = this.paramsData
    if (!this.paramsData.d_address) {
      let address = this.paramsData.address.replace(' ', '')
      address = address.replace('辽宁省', '')
      address = address.replace('沈阳市', '')
      this.formItem.d_address = address
      this.formItem.a_address = address
    } else {
      let address = this.paramsData.address.replace('辽宁省', '')
      address = address.replace('沈阳市', '')
      address = address.replace(' ', '')
      this.formItem.a_address = address
    }
    data = JSON.stringify(data)
    this.getMailList(data, 'cityList')
    // console.log(this.paramsData)
    if (this.formItem.fc_no) {
      this.fc_no = this.formItem.fc_no
    } else {
      this.fc_no = ''
    }
    if (!this.formItem.operation) {
      this.clearInfo()
    }
    if (!this.formItem.operation || this.formItem.operation === '1') {
      if (this.formItem.settingList) {
        let JZBX = 0
        let JZBY = 0
        let JZFBY = 0
        this.formItem.settingList.forEach(function (item) {
          if (item.type_dictionary === 'JZBX') {
            JZBX = parseFloat(item.three_dictionary)
          }
          if (item.type_dictionary === 'JZBY') {
            JZBY = parseFloat(item.three_dictionary)
          }
          if (item.type_dictionary === 'JZFBY') {
            JZFBY = parseFloat(item.three_dictionary)
          }
        })
        if (this.paramsData.subsidy_type === '610' || this.paramsData.subsidy_type === '620') {
          this.formItem.subsidy_mode = JZBY
        } else {
          this.formItem.subsidy_mode = JZFBY
        }
        if (!this.formItem.subsidy_rmbone) {
          this.formItem.subsidy_rmbone = JZBX
        }
      } else {
        this.getUserInfo()
      }
    } else {
      console.log(this.formItem.area, 'this.formItem.area')
    }
  },
  watch: {
    // 监听英文名只能输入英文和数字
    fc_no: function () {
      this.fc_no = this.fc_no.replace(/[\W]/g, '')
      this.formItem.fc_no = this.fc_no
      // console.log(this.formItem.fc_no, 'this.formItem.fc_no')
    }
    // 监听中文名只能输入中文和数字
    // newRoleNameZh:function(){
    //   this.newRoleNameZh =  this.newRoleNameZh.replace(/[^0-9\u4e00-\u9fa5]/g,'');
    // }
  }
}
</script>
<style>
.inputClass {
  display: inline-block;
  width: 100%;
  position: relative;
  vertical-align: middle;
  line-height: normal;
}
.concentrated-input {
  display: inline-block;
  width: 100%;
  height: 32px;
  line-height: 1.5;
  padding: 4px 7px;
  font-size: 12px;
  border: 1px solid #dcdee2;
  border-radius: 4px;
  color: #515a6e;
  background-color: #fff;
  background-image: none;
  position: relative;
  cursor: text;
  -webkit-transition: border 0.2s ease-in-out, background 0.2s ease-in-out, -webkit-box-shadow 0.2s ease-in-out;
  transition: border 0.2s ease-in-out, background 0.2s ease-in-out, -webkit-box-shadow 0.2s ease-in-out;
  transition: border 0.2s ease-in-out, background 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  transition: border 0.2s ease-in-out, background 0.2s ease-in-out, box-shadow 0.2s ease-in-out, -webkit-box-shadow 0.2s ease-in-out;
  top: 1.5px;
}
.concentrated-input:hover {
  border-color: #57a3f3;
}
</style>
